<template>
    <fieldset>
        <legend>cart1</legend>
        <h2>{{name}}</h2>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>商品:{{item.title}}</b>
                &nbsp;
                <b>单价:{{item.price}}</b>
                &nbsp;
                <b>数量:{{item.count}}</b>
                &nbsp;
                <button @click="del(item)">移除购物车</button>
            </li>
        </ul>
        <h1>
            <b>总价格:</b>
            <b>{{total}}</b>
        </h1>
    </fieldset>
</template>
<script>
import{mapGetters, mapState,mapActions} from "vuex"
    export default{
        computed:{
           ...mapState("cart1",['name','carts']),
           ...mapGetters("cart1",['total'])
        },
        methods:{
            ...mapActions('cart1',['REMOVE_CART']),
            del(item){
                this.REMOVE_CART(item)
            }
        }
    }
</script>